<style lang="less" scoped>
  .mortality{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 80% 50%;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

<template>
  <div class="mortality">
    <div class="mortality_title">
      <span>吞咽困难筛查率</span>
    </div>
    <medical-charts v-if="timeLine.length > 0" :chart-id="chartId" :legend-title="legendTitle" :time-line="timeLine" :chart-data="chartData" :left-y="leftY" :right-y="rightY" class="mortality_content" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import medicalCharts from './medicalCharts'
import { getStrokeDeathRatio } from '@/api/comprehensive/mortality'
export default {
  components: {
    medicalCharts
  },
  data() {
    return {
      chartId: 'mortality',
      legendTitle: ['静脉溶栓', '脑出血', '动脉瘤介入栓塞术', '动脉瘤开颅夹闭术'],
      leftY: '比率',
      rightY: '',
      timeLine: [],
      chartData: [],
      setInter: null
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      // this.timeLine = []
      // this.chartData = []
      getStrokeDeathRatio({
        hospitalId: this.$store.getters.hospitalId
      }).then(res => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            const averageData = []
            const JMRSData = []
            const NCXData = []
            const DMLJRData = []
            const DMLKLData = []
            const timeLine = []
            res.data.forEach(el => {
              timeLine.push(el.timeName)
              JMRSData.push(el.ratioNeedleDeath)
              NCXData.push(el.ratioCHDeath)
              DMLJRData.push(el.ratioIAIDeath)
              DMLKLData.push(el.ratioIACDeath)
            })
            this.timeLine = timeLine
            this.chartData = [
              {
                name: '静脉溶栓',
                type: 'bar',
                barWidth: 20,
                label: {
                  show: true,
                  position: 'top'
                },
                data: JMRSData
              },
              {
                name: '脑出血',
                type: 'bar',
                barWidth: 20,
                label: {
                  show: true,
                  position: 'top'
                },
                data: NCXData
              },
              {
                name: '动脉瘤介入栓塞术',
                type: 'bar',
                barWidth: 20,
                label: {
                  show: true,
                  position: 'top'
                },
                data: DMLJRData
              },
              {
                name: '动脉瘤开颅夹闭术',
                type: 'bar',
                barWidth: 20,
                label: {
                  show: true,
                  position: 'top'
                },
                data: DMLKLData
              }
            ]
          }
        }
      })
    }
  }
}
</script>
